<mat-form-field id="search-input">
    <input matInput placeholder="{{ 'findHero' | translate }}!"
           [matAutocomplete]="heroesAutocomplete" [formControl]="heroFormControl">
</mat-form-field>

<mat-autocomplete #heroesAutocomplete="matAutocomplete">
    <mat-option *ngFor="let hero of filteredHeroes"
                (onSelectionChange)="searchHero(hero)"
                [value]="hero.name">
        {{hero.name}}
    </mat-option>
</mat-autocomplete>
